<template>
    <div class="extent">
        <span class="leve" v-for="(light,idx) in total.slice(0,5)" :key="idx">
            <img :src="light"/>
        </span>
    </div>
</template>
<script setup>
import RED from "/asset/imgs/extent/degreeB.svg";
import GREEN from "/asset/imgs/extent/degreeA.svg";
import NONE from "/asset/imgs/extent/degreeE.svg";
import { computed, ref } from "vue";
const props = defineProps({
    level: {
        type: Number,
        default: 0
    },
    dir: {
        type: Boolean,
        default: false
    }
});

const laght = ref([NONE, NONE, NONE, NONE, NONE]);

const total = computed(() => {
    laght.value = [];
    let Light = NONE;
    if (props.dir) Light = GREEN;
    else Light = RED;
    for (let i = 0; i < props.level / 2; i++) {
        laght.value[i] = Light;
    }
    return laght.value;
});
</script>
<style lang="less" scoped>
.extent {
    // background-color: royalblue;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    gap: 3px;
    // margin-left: 4px;
    transform: scale(0.9);
}

.leve {
    img {
        -webkit-user-drag: none;
    }

    // display: inline-flex;
    /* background-color: blue; */
    // margin-left: 4px;
}
</style>
